10. CSS 모범 사례

효율적인 CSS 작성은 유지보수와 성능에 큰 영향을 미칩니다. 잘 조직화된 코드와 명확한 네이밍 컨벤션, 그리고 성능을 최적화하는 기법은 대규모 프로젝트나 협업 환경에서 필수적입니다. 이 섹션에서는 코드 조직화 및 네이밍 컨벤션, 성능 최적화 기법을 다룹니다.

10.1 코드 조직화와 네이밍 컨벤션

10.1.1 코드 조직화

효율적인 코드 조직화는 CSS 코드의 가독성을 높이고, 유지보수를 쉽게 해줍니다. 이를 위해 다음과 같은 방법을 사용할 수 있습니다.

CSS 파일 구조 분리:

큰 프로젝트에서는 CSS 파일을 목적별로 나누는 것이 좋습니다. 예를 들어, 공통 스타일, 컴포넌트별 스타일, 레이아웃 스타일 등으로 분리합니다.

파일 구조 예시:

/css
├── base.css        // 기본 스타일 (reset, typography 등)
├── layout.css      // 레이아웃 관련 스타일
├── components.css  // 개별 컴포넌트 스타일
└── theme.css       // 테마와 색상 관련 스타일

주석 활용:
- 코드의 의미를 명확하게 하기 위해 주석을 적절히 사용합니다. 주석은 코드가 무엇을 하고 있는지, 왜 특정 스타일을 적용했는지 설명할 때 유용합니다.
```
/* 기본 타이포그래피 설정 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
```
일관된 스타일 규칙:
- 코드에서 들여쓰기, 공백, 중괄호 위치 등은 프로젝트 전반에서 일관성 있게 사용합니다. 예를 들어, 중괄호를 같은 줄에 두거나, 속성 사이에 일정한 간격을 유지합니다.
```
/* 일관된 코드 스타일 */
.header {
  background-color: #f8f9fa;
  padding: 20px;
}
```

10.1.2 네이밍 컨벤션

CSS 네이밍 컨벤션은 코드의 의미를 명확히 하고, 클래스 이름의 충돌을 방지하기 위해 중요합니다. 대표적인 네이밍 방식은 다음과 같습니다.

BEM(Block, Element, Modifier):
- BEM은 CSS 클래스 이름을 구조적으로 작성하는 방법입니다. 이 방식은 코드 재사용성과 유지보수성을 높이는 데 효과적입니다.
```
<div class="card card--featured">
  <div class="card__header">Header</div>
  <div class="card__body">Body</div>
</div>
```

단일 책임 원칙:

CSS 클래스는 하나의 목적만 가지도록 명명합니다. 이를 통해 스타일을 보다 구체적이고 명확하게 관리할 수 있습니다.

/* 잘못된 예 */
.button-large-blue {
  padding: 20px;
  background-color: blue;
}

/* 올바른 예 */
.button-large {
  padding: 20px;
}

.button-blue {
  background-color: blue;
}

스코프 제한:
- 전역적으로 적용되는 클래스 이름을 피하고, 해당 요소에만 영향을 미치도록 스코프를 제한하는 것이 좋습니다. 컴포넌트의 클래스 이름을 독립적이고 고유하게 만드는 것이 중요합니다.

10.2 성능 최적화 기법

성능 최적화는 페이지 로딩 속도를 높이고, 사용자 경험을 개선하기 위해 중요합니다. 다음은 CSS 성능을 최적화하기 위한 몇 가지 기법입니다.

10.2.1 불필요한 CSS 제거

사용되지 않는 CSS 제거:
- 사용되지 않는 CSS 코드는 로딩 시간을 증가시키므로, 불필요한 코드를 제거하여 성능을 향상시킬 수 있습니다. 이를 위해 PurgeCSS와 같은 도구를 사용할 수 있습니다.
중복 스타일 최소화:
- 중복된 스타일 규칙을 제거하고, 가능한 한 중복되지 않도록 코드를 정리합니다.

10.2.2 파일 크기 최적화

CSS 파일 압축: - CSS 파일을 배포할 때는 공백과 주석을 제거하여 파일 크기를 최소화합니다. 이를 위해 CSS Minifier와 같은 도구를 사용할 수 있습니다.
```
/* 압축 전 */
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* 압축 후 */
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
}
```
CSS 파일 병합: 여러 개의 CSS 파일을 하나로 병합하면 HTTP 요청 횟수를 줄일 수 있어 성능이 향상됩니다.

10.2.3 렌더링 성능 향상

Critical CSS 사용:
- 크리티컬 CSS는 페이지가 처음 렌더링될 때 꼭 필요한 스타일을 먼저 로딩하여 페이지가 빨리 보이도록 합니다. 나머지 CSS는 비동기 로딩 방식으로 처리할 수 있습니다.
비동기 CSS 로딩:
- rel="preload" 또는 media 속성을 사용하여 CSS 파일을 비동기적으로 로드할 수 있습니다.
가상 DOM 사용 고려:
- 많은 스타일 변경이 발생하는 대규모 애플리케이션에서는 가상 DOM을 사용하는 라이브러리(예: React)를 고려할 수 있습니다. 이를 통해 불필요한 DOM 업데이트를 줄여 렌더링 성능을 높일 수 있습니다.

10.1 코드 조직화와 네이밍 컨벤션​

10.1.1 코드 조직화​

10.1.2 네이밍 컨벤션​

10.2 성능 최적화 기법​

10.2.1 불필요한 CSS 제거​

10.2.2 파일 크기 최적화​